<html>

</html>
<body>
    <div class="main">
        <div class="one">
            <div class="three"></div>
            <div class="four"></div>
            <div class="five"></div>
        </div>
        <div class="two"></div>

    </div>    
</body>
<style>
    .body{
        height: 100%;
        width: 100%;
    }
    .main{
        /* 设置 flex 布局 */
        display: flex;
        /* flex 布局显示方式按照列显示 */
        flex-direction: column;
        height: calc(100% - 12px);
        border: 1px solid red;
        padding: 5 5 5 5;
    }
    .one{
        border: 1px solid black;
        flex: 1;

        padding: 5 5 5 5;
        display: flex;
        flex-direction: row;
    }
    .two{
        margin-top: 10px;
        border: 1px solid green;
        flex: 3;
    }
    .three{
        border: 1px solid orange;
        flex: 1;
    }
    .four{
        border: 1px solid yellow;
        flex: 1;
    }
    .five{
        border: 1px solid blue; 
        flex: 1;   
    }    
</style>